<template>
	<transition name="fade">
		<div class="copyright" v-if="visible">
			<v-icon right class="icon" name="copyright" :size="18"></v-icon>
			{{ date }} &nbsp;
			<a :href="link" target="copyright">{{ name }} &nbsp; {{ record }}</a>
		</div>
	</transition>
</template>

<script setup>
import { computed } from "vue"
import { useSettingStore } from "/store/setting"

const settingStore = useSettingStore()
const visible = computed(() => settingStore.copyright.visible)
const name = computed(() => settingStore.copyright.name)
const date = computed(() => settingStore.copyright.date)
const link = computed(() => settingStore.copyright.link)
const record = computed(() => settingStore.copyright.record)
</script>

<style lang="scss" scoped>
.copyright {
	margin-top: 40px;
	margin-bottom: 20px;
	width: 100%;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	flex: none;
	.icon {
		position: relative;
		bottom: -20px;
		filter: drop-shadow(0 -20px var(--el-text-color-secondary));
	}
	&.fade-enter-active,
	&.fade-leave-active {
		transition: var(--transition);
	}
	&.fade-enter-from,
	&.fade-leave-to {
		height: 0;
		margin: 0;
	}
}
</style>
